import { ref } from "vue";

let columnOption:any = ref({
    title: {
        text: 'OncotreeLineage',
        left: '30%',
    },
    legend: {
        data: ['ecDNA+', 'ecDNA-'], // 图例名称，应该和 series 中的名称匹配
        right: '10' // 图例的位置，可以设置为 'top', 'bottom', 'left', 'right'
    },
    grid: {
        bottom: '35%',
        width: 'auto',
        height: 'auto'
    },
    xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
            interval: 0,  // 设置为 0，确保每个标签都显示
            rotate: 40,    // 如果标签过长，可以设置旋转角度
            color: 'black'
        },
        nameTextStyle: {
            color: 'black',
        },
    },
    yAxis: {
        type: 'value',
        show: true,
        axisLine: {
            show: true
        },
        name: 'Number of cell lines',
        nameLocation: 'middle',
        axisLabel: {
            color: 'black'
        },
        nameTextStyle: {
            padding: [5, 0, 20, 0],  
            fontSize: 16,
            color: 'black',
            align: 'center',  
        },
    },
    series: [
        {
            name: 'ecDNA+',
            data: [],
            type: 'bar',
            itemStyle: {
                color: '#E41A1C', // 设置默认柱子颜色
            },
            barWidth: 'auto',
        },
        {
            name: 'ecDNA-',
            data: [],
            type: 'bar',
            itemStyle: {
                color: '#377EB8', // 设置默认柱子颜色
            },
            barWidth: 'auto',
        },
    ],
    tooltip: {
        trigger: 'axis',  // 或 'item' 取决于你想要的效果
        axisPointer: {    // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params:any) {
            let content = `${params[0].name} <br/>`;
            params.forEach((param:any)=> {
                content += `${param.seriesName}: ${param.value} <br/>`;
            });
            return content;
        }
    }
})

let averageOption:any = ref({
    title: {
        text: '',
        left: '30%',
    },
    legend: {
        data: ['ecDNA+', 'ecDNA-'], // 图例名称，应该和 series 中的名称匹配
        right: '0' // 图例的位置，可以设置为 'top', 'bottom', 'left', 'right'
    },
    xAxis: {
        type: 'category',
        data: [ ],
        axisLabel: {
            interval: 0,  // 设置为 0，确保每个标签都显示
            color: 'black'
        },
        nameTextStyle: {
            color: 'black',
        },
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true
        },
        name: 'Average value',
        nameLocation: 'middle',
        axisLabel: {
            color: 'black'
        },
        nameTextStyle: {
            padding: [5, 0, 20, 0],  
            fontSize: 16,
            color: 'black',
            align: 'center',  
        },
    },
    grid: {
        bottom: '35%',
        width: 'auto',
        height: 'auto'
    },
    series: [
        {
            name: 'ecDNA+',
            data: [],
            type: 'bar',
            itemStyle: {
                color: '#E41A1C', // 设置默认柱子颜色
            },
            barWidth: '25px',
            barGap: '200%',
            label: {
                show: true,
                position: 'bottom',
                formatter: 'ecDNA+', // 标签显示为 ecDNA+
                color: 'black'
            },
        },
        {
            name: 'ecDNA-',
            data: [],
            type: 'bar',
            itemStyle: {
                color: '#377EB8', // 设置默认柱子颜色
            },
            barWidth: '25px',
            label: {
                show: true,
                position: 'bottom',
                formatter: 'ecDNA-', // 标签显示为 ecDNA+
                color: 'black'
            },
        },
    ],
    tooltip: {
        trigger: 'axis',  // 或 'item' 取决于你想要的效果
        axisPointer: {    // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params:any) {
            let content = `${params[0].name} <br/>`;
            params.forEach((param:any)=> {
                content += `${param.seriesName}: ${param.value} <br/>`;
            });
            return content;
        }
    }
})

export { columnOption, averageOption }